import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    TextInput,
    FlatList,
    RefreshControl,
    ActivityIndicator,
    Alert,
    AsyncStorage,
    TouchableOpacity,
    Image,
    Modal,
    DeviceInfo, ViewPropTypes
} from 'react-native';
import PropTypes from 'prop-types';
export const MORE_MENU = {
    Custom_Language: {name: '自定义语言', icon: require('../res/images/ic_custom_language.png')},
    Sort_Language: {name: '语言排序', icon: require('../res/images/ic_swap_vert.png')},
    Custom_Theme: {name: '自定义主题', icon: require('../res/images/ic_view_quilt.png')},
    Custom_Key: {name: '自定义标签', icon: require('../res/images/ic_custom_language.png')},
    Sort_Key: {name: '标签排序', icon: require('../res/images/ic_swap_vert.png')},
    Remove_Key: {name: '标签移除', icon: require('../res/images/ic_remove.png')},
    About_Author: {name: '关于作者', icon: require('../res/images/ic_insert_emoticon.png')},
    About: {name: '关于', icon: require('../res/images/ic_trending.png')},
    Website: {name: 'Website', icon: require('../res/images/ic_computer.png')},
    Feedback: {name: '反馈', icon: require('../res/images/ic_feedback.png')},
    Share: {name: '分享', icon: require('../res/images/ic_share.png')},
};
import MenuDialog from './MenuDialog';

export default class MoreMenu extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    /**
     * 打开更多菜单
     */
    open() {
        this.showPopover();
    }

    showPopover() {
        this.dialog.show();
    }

    closePopover() {
        this.dialog.dismiss();
    }

    static propTypes = {
        contentStyle: ViewPropTypes.style,
        menus: PropTypes.array.isRequired,
    }
    onMoreMenuSelect(){
        this.props.navigation.navigate('Page1');
        this.closePopover();
    }
    renderMoreView() {
        const {theme, menus} = this.props;
        return (
            <MenuDialog
                ref={dialog => this.dialog = dialog} //将组件MenuDialog作为参数赋值给了this.dialog
                menus={menus}
                theme={theme}
                onSelect={(tab) => this.onMoreMenuSelect(tab)}
            />
        );
    }
    render() {
        return this.renderMoreView();
    }
}